<template>
  <div class="container">
    <view class="tips fz12">完善资料，获得更多曝光</view>

    <view class="myPhone">
      <view class="title fz16 bold">我的照片</view>
      <view class="phone flex">
        <view class="phoneImg shrink" @click="selectPhoto('head')">
          <image :src="userInfo.logo" mode="aspectFill" />
        </view>
        <view class="skills grids">
          <view class="skillBox" v-if="userPicImg(1)" @click="selectPhoto(1)">
            <image :src="userPicImg(1)" mode="aspectFill" />
            <view class="close" @click.stop="delPhoto(1)">
              <uv-icon name="close" color="#fff" size="14"></uv-icon>
            </view>
          </view>
          <view class="skillBox" @click="selectPhoto(1)" v-else>
            <view class="center">
              <uv-image customStyle="margin: auto;" src="https://oss.seenlove.com/images/9e460232629eda0a6d43b72ad02f4565.png" width="25px" height="25px"></uv-image>
              <view class="label">旅途照片</view>
            </view>
          </view>

          <view class="skillBox" v-if="userPicImg(2)" @click="selectPhoto(2)">
            <image :src="userPicImg(2)" mode="aspectFill" />
            <view class="close" @click.stop="delPhoto(2)">
              <uv-icon name="close" color="#fff" size="14"></uv-icon>
            </view>
          </view>
          <view class="skillBox" v-else @click="selectPhoto(2)">
            <view class="center">
              <uv-image customStyle="margin: auto;" src="https://oss.seenlove.com/images/409919ad2180f908895e2895b32a1adc.png" width="25px" height="25px"></uv-image>
              <view class="label">生活技能</view>
            </view>
          </view>

          <view class="skillBox" v-if="userPicImg(3)" @click="selectPhoto(3)">
            <image :src="userPicImg(3)" mode="aspectFill" />
            <view class="close" @click.stop="delPhoto(3)">
              <uv-icon name="close" color="#fff" size="14"></uv-icon>
            </view>
          </view>
          <view class="skillBox" @click="selectPhoto(3)" v-else>
            <view class="center">
              <uv-image customStyle="margin: auto;" src="https://oss.seenlove.com/images/060dbfdf2df7dbf9dabcaad2ce5adc4f.png" width="25px" height="25px"></uv-image>
              <view class="label">最爱的美食</view>
            </view>
          </view>
        </view>
      </view>

      <view class="otherSkills grids">
        <view class="skillBox" v-if="userPicImg(4)" @click="selectPhoto(4)">
          <image :src="userPicImg(4)" mode="aspectFill" />
          <view class="close" @click.stop="delPhoto(4)">
            <uv-icon name="close" color="#fff" size="14"></uv-icon>
          </view>
        </view>
        <view class="skillBox" @click="selectPhoto(4)" v-else>
          <view class="center">
            <uv-image customStyle="margin: auto;" src="https://oss.seenlove.com/images/53ba8aa2d43411ad7add695ae3dce4cc.png" width="25px" height="25px"></uv-image>
            <view class="label">难忘的一天</view>
          </view>
        </view>
        <view class="skillBox" v-if="userPicImg(5)" @click="selectPhoto(5)">
          <image :src="userPicImg(5)" mode="aspectFill" />
          <view class="close" @click.stop="delPhoto(5)">
            <uv-icon name="close" color="#fff" size="14"></uv-icon>
          </view>
        </view>
        <view class="skillBox" v-else @click="selectPhoto(5)">
          <view class="center">
            <uv-image customStyle="margin: auto;" src="https://oss.seenlove.com/images/c356260e807a483e48c31c37707f5a24.png" width="25px" height="25px"></uv-image>
            <view class="label">生活照</view>
          </view>
        </view>
        <view class="skillBox" v-if="userPicImg(6)" @click="selectPhoto(5)">
          <image :src="userPicImg(6)" mode="aspectFill" />
          <view class="close" @click.stop="delPhoto(6)">
            <uv-icon name="close" color="#fff" size="14"></uv-icon>
          </view>
        </view>
        <view class="skillBox" v-else @click="selectPhoto(6)">
          <view class="center">
            <uv-image customStyle="margin: auto;" src="https://oss.seenlove.com/images/00d0986365f9dc872394a445076684a4.png" width="25px" height="25px"></uv-image>
            <view class="label">运动健身</view>
          </view>
        </view>
      </view>

      <view class="info" @click.stop="proxy.$utils.toLink('/packagePages/my/editUserInfo')">
        <view class="top flex justifyBetween">
          <view class="title fz16 bold">基础资料</view>
          <view class="edit flex alignCenter fz12">
            编辑<uv-icon name="arrow-right"></uv-icon>
          </view>
        </view>
        <view class="content">
          <view class="name bold">{{userInfo.nickName}}</view>
          <view class="grids gridColumns2 items">
            <view class="item flex alignCenter">
              <uv-image src="https://oss.seenlove.com/images/f97500ae418067fce9e13289659c17d2.png" width="15px" height="15px"></uv-image>
              <text>{{userInfo.ageYear}}·{{userInfo.constellation}}</text>
            </view>
            <view class="item flex alignCenter">
              <uv-image src="https://oss.seenlove.com/images/59d6242c5d2f66b305563fd7f6275673.png" width="15px" height="15px"></uv-image>
              <text>{{userInfo.height}}·{{userInfo.weight}}</text>
            </view>
            <view class="item flex alignCenter">
              <uv-image src="https://oss.seenlove.com/images/0930b059ae0f05069f8156513bcb3d16.png" width="15px" height="15px"></uv-image>
              <text>{{userInfo.edu}}·{{userInfo.school}}</text>
            </view>
            <view class="item flex alignCenter">
              <uv-image src="https://oss.seenlove.com/images/398a43fc0155d234d3b0514e0f05568d.png" width="15px" height="15px"></uv-image>
              <text>{{userInfo.industry}}·{{userInfo.company}}</text>
            </view>
            <view class="item flex alignCenter">
              <uv-image src="https://oss.seenlove.com/images/2661c6dba494d4c2c289a5f6fb4ff779.png" width="15px" height="15px"></uv-image>
              <text>{{userInfo.city}}·{{userInfo.homeEconomize}}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="info" @click="proxy.$utils.toLink('/packagePages/my/myAuth')">
        <view class="top flex justifyBetween">
          <view class="title fz16 bold">认证信息</view>
        </view>
        <view class="content auth">
          <view class="topInfo flex justifyBetween alignCenter">
            <view class="">
              <view class="name">双重认证</view>
              <view class="flex alignCenter">
                <view @click.stop="authType=1" class="flex alignCenter authIcon fz10" style="margin-right: 6px;">
                  <uv-image src="https://oss.seenlove.com/images/94c18fd5055c9f7a34e15f742aab7459.png" width="21px" height="21px"></uv-image>
                  <text>实名</text>
                </view>
                <view class="flex alignCenter authIcon fz10" @click.stop="authType=2">
                  <uv-image src="https://oss.seenlove.com/images/14046fd9cdd94884790b339deddb7408.png" width="21px" height="21px"></uv-image>
                  <text>工作</text>
                </view>
              </view>
            </view>
            <view class="reliability" v-if="authInfo">
              <view class="fz10 textRight">
                可信度
              </view>
              <view class="percentage bold">{{authInfo.reliability||0}}%</view>
            </view>
            <uv-button v-else text="立即认证" shape="circle" color="#9F2AFF"></uv-button>
          </view>
          <view class="flex alignCenter justifyBetween bottomInfo" v-if="authInfo && authType==1">
            <view class="authBox">
              <view class="fz14" style="margin-bottom: 5px;">认证方式·{{authInfo.realNameType}}</view>
              <view class="fz14">{{authInfo.identificationNumber}}</view>
            </view>
            <view class="check flex alignCenter justifyCenter fz12 shrink">
              <view class="icon">
                <uv-icon name="checkmark" color="#fff"></uv-icon>
              </view>
              {{authInfo.isIdentityVerified}}
            </view>
          </view>
          <!-- 工作认证 -->
          <view class="flex alignCenter justifyBetween bottomInfo" v-if="authInfo && authType==2">
            <view class="">
              <view class="fz14 bold" style="margin-bottom: 5px;">认证方式：{{authInfo.workMethod}}</view>
              <view class="fz12">工作信息具有时效性，且只认证公司名，无法认证职位真实性</view>
            </view>
            <view class="check flex alignCenter justifyCenter fz12 shrink">
              <view class="icon">
                <uv-icon name="checkmark" color="#fff"></uv-icon>
              </view>
              {{authInfo.isCompanyVerified}}
            </view>
          </view>
        </view>
      </view>

      <view class="switchWrap" v-if="false">
        <view class="switchBox flex alignCenter justifyBetween fz12">
          显示学校名称
          <uv-switch v-model="value" activeColor="#9E06FF" size="18"></uv-switch>
        </view>
        <view class="switchBox flex alignCenter justifyBetween fz12">
          显示公司名称
          <uv-switch v-model="value" activeColor="#9E06FF" size="18"></uv-switch>
        </view>
      </view>

      <view class="info" @click="proxy.$utils.toLink(`/packagePages/my/setUserInfo?title=自我描述&type=1`)">
        <view class="top flex justifyBetween">
          <view class="width100 title fz16 flex alignCenter justifyBetween">
            <view class="bold">自我描述</view>
            <view class="flex alignBaseline fz12" style="color:#999990">
              编辑
              <uv-icon name="arrow-right" color="#999990" size="12"></uv-icon>
            </view>
          </view>
        </view>
        <!-- <view class="tips fz12">你已设置隐藏该内容，仅自己可见</view> -->
        <view class="intro fz12" v-if="queryInfo_format(1)">
          <view class="tbDescribe">{{queryInfo_format(1).tbDescribe}}</view>
          <showImages v-model="queryInfo_format(1).pictureUrls"></showImages>
        </view>
        <view class="introBox flex justifyBetween alignCenter" v-else>
          <view>
            <view class="aTitle fz12">简单描述一下自己是一个什么样的人</view>
            <view class="desc fz10">更吸引TA</view>
          </view>
          <view class="plus">
            <view class="plusIcon">
              <uv-icon name="plus" color="#979797" :size="22"></uv-icon>
            </view>
          </view>
        </view>
      </view>

      <view class="info" @click="proxy.$utils.toLink(`/packagePages/my/setUserInfo?title=爱情观&type=2`)">
        <view class="top flex justifyBetween">
          <view class="width100 title fz16 flex alignCenter justifyBetween">
            <view class="bold">爱情观</view>
            <view class="flex alignBaseline fz12" style="color:#999990">
              编辑
              <uv-icon name="arrow-right" color="#999990" size="12"></uv-icon>
            </view>
          </view>
        </view>
        <!-- <view class="tips fz12">你已设置隐藏该内容，仅自己可见</view> -->
        <view class="intro fz12" v-if="queryInfo_format(2)">
          <view class="tbDescribe">{{queryInfo_format(2).tbDescribe}}</view>
          <showImages v-model="queryInfo_format(2).pictureUrls"></showImages>
        </view>
        <view class="introBox flex justifyBetween alignCenter" v-else>
          <view>
            <view class="aTitle fz12">你期待的爱情是什么 你对爱情婚姻的理解</view>
            <view class="desc fz10">你对爱情婚姻的理解</view>
          </view>
          <view class="plus">
            <view class="plusIcon">
              <uv-icon name="plus" color="#979797" :size="22"></uv-icon>
            </view>
          </view>
        </view>
      </view>

      <view class="info" @click="proxy.$utils.toLink(`/packagePages/my/setUserInfo?title=理想的另一半&type=6`)">
        <view class="top flex justifyBetween">
          <view class="width100 title fz16 flex alignCenter justifyBetween">
            <view class="bold">理想的另一半</view>
            <view class="flex alignBaseline fz12" style="color:#999990">
              编辑
              <uv-icon name="arrow-right" color="#999990" size="12"></uv-icon>
            </view>
          </view>
        </view>
        <view class="intro fz12" v-if="queryInfo_format(6)">
          <view class="tbDescribe">{{queryInfo_format(6).tbDescribe}}</view>
          <showImages v-model="queryInfo_format(6).pictureUrls"></showImages>
        </view>
        <view class="introBox flex justifyBetween alignCenter" v-else>
          <view>
            <view class="aTitle fz12">说说你想要的另一半 希望他是一个什么样的人</view>
            <view class="desc fz10">希望他是一个什么样的人</view>
          </view>
          <view class="plus">
            <view class="plusIcon">
              <uv-icon name="plus" color="#979797" :size="22"></uv-icon>
            </view>
          </view>
        </view>
      </view>

      <view class="info" @click="proxy.$utils.toLink(`/packagePages/my/setUserInfo?title=家庭背景&type=3`)">
        <view class="top flex justifyBetween">
          <view class="width100 title fz16 flex alignCenter justifyBetween">
            <view class="bold">家庭背景</view>
          </view>
        </view>
        <!-- <view class="tips fz12">你已设置隐藏该内容，仅自己可见</view> -->

        <view class="intro fz12" v-if="queryInfo_format(3)">
          <view class="tbDescribe">{{queryInfo_format(3).tbDescribe}}</view>
          <showImages v-model="queryInfo_format(3).pictureUrls"></showImages>
        </view>
        <view class="introBox flex justifyBetween alignCenter" v-else>
          <view>
            <view class="aTitle fz12">介绍自己父母，兄弟姐妹</view>
            <view class="desc fz10">让TA了解你多一点</view>
          </view>
          <view class="plus">
            <view class="plusIcon">
              <uv-icon name="plus" color="#979797" :size="22"></uv-icon>
            </view>
          </view>
        </view>
      </view>

      <view class="info" @click="proxy.$utils.toLink(`/packagePages/my/setUserInfo?title=兴趣爱好&type=4`)">
        <view class="top flex justifyBetween">
          <view class="title fz16 bold">兴趣爱好</view>
        </view>

        <view class="intro fz12" v-if="queryInfo_format(4)">
          <view class="tbDescribe">{{queryInfo_format(4).tbDescribe}}</view>
          <showImages v-model="queryInfo_format(4).pictureUrls"></showImages>
        </view>
        <view class="introBox flex justifyBetween alignCenter" v-else>
          <view>
            <view class="aTitle fz12">你期待的爱情是什么样</view>
            <view class="desc fz10">你对爱情和婚姻的理解</view>
          </view>
          <view class="plus">
            <view class="plusIcon">
              <uv-icon name="plus" color="#979797" :size="22"></uv-icon>
            </view>
          </view>
        </view>
      </view>

      <view class="info">
        <view class="top flex justifyBetween">
          <view class="title fz16 bold">语音介绍</view>
        </view>

        <view class="flex alignCenter audioBox" v-if="queryInfo_format(5)&& queryInfo_format(5).pictureUrls && queryInfo_format(5).pictureUrls.length">
          <customAudio :audioSrc="queryInfo_format(5).pictureUrls[0]"></customAudio>
          <view class="close" @click="delAudio">
            <uv-icon name="close" color="#fff" size="12"></uv-icon>
          </view>
        </view>

        <view class="introBox flex justifyBetween alignCenter" v-else @click="instance.refs.tapeAudioRef.open()">
          <view>
            <view class="aTitle fz12">用声音介绍自己</view>
            <view class="desc fz10">让大家更立体的了解你</view>
          </view>
          <view class="plus">
            <view class="plusIcon">
              <uv-image src="https://oss.seenlove.com/images/52207a8458d2c08f15d1b9c67950aa06.png" width="22px" height="22px"></uv-image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <tapeAudio ref="tapeAudioRef" needFile="1" v-model="soundRecording"></tapeAudio>
  </div>
</template>

<script setup lang="ts">
import customAudio from "@/components/uv/customAudio.vue";
import showImages from "@/components/main/showImages.vue";
import tapeAudio from "@/components/uv/tapeAudio.vue"; //录音
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let model = ref({
  nickName: "",
  sex: "MAN",
  birthday: "",
  logoId: "",
  constellation: "", //星座
  height: 150,
  school: "", //毕业学校
  edu: "", //学历
  homeEconomize: "",
  homeMarket: "",
  homeCounty: "",
  industry: "", //行业,
  income: "", //收入
  lifePhotosId: "", //生活照
  cityLon: "",
  cityLat: "",
  city: "",
  reallyName: "",
  idCard: "",
  oneselfTags: "", //自我标签
  hisTags: "", //对方期望标签
  oneselfDescribe: "", //自我描述
  hisDescribe: "", //期望对方描述
  weight: "",
  marriage: null, //婚姻状况
});
let userInfo = ref({});
let userPicList = ref([]);
let queryInfoList = ref([]);
let soundRecording = ref(""); //录音
let authType = ref(1); //认证类型
let authInfo = ref({}); //认证信息

onLoad(() => {
  getInfo();
});

async function selectPhoto(type) {
  let resp = await proxy.$auth.chooseImage();
  let element = resp[0];
  if (type == "head") {
    let { id } = await counter.uploadHeadImgFile(element);
    model.value.logoId = id;
    await proxy.$apis.loginReginfo(model.value);
  } else {
    await uploadUserPic(element, type);
  }
  getInfo();
}

function userPicImg(type) {
  let index = proxy.$utils.findIndexByField(userPicList.value, "type", type);
  if (index == -1) {
    return "";
  } else {
    return userPicList.value[index].pictureUrl;
  }
}

async function delPhoto(type) {
  await proxy.$apis.delUserPic({ type });
  getInfo();
}

async function delAudio() {
  await proxy.$apis.delSound();
  getInfo();
}

async function getInfo() {
  console.log("获取个人信息", counter.slParams.userId);
  let resp = await counter.getUserInfo(counter.slParams.userId);
  model.value = proxy.$utils.formatFunction(resp, { ...model.value });
  userInfo.value = { ...resp };

  queryInfoList.value = await proxy.$apis.queryInfo({
    userId: counter.slParams.userId,
  });
  console.log("查询信息", queryInfoList.value);

  userPicList.value = await proxy.$apis.queryUserPic({
    userId: counter.slParams.userId,
  });
  console.log("userPicList.value", userPicList.value);

  authInfo.value = await proxy.$apis.userRealInfo({
    userId: counter.slParams.userId,
  });
  counter.setRelease("authInfo", authInfo.value);
  console.log("实名认证", authInfo.value);
}

function queryInfo_format(type) {
  let index = proxy.$utils.findIndexByField(queryInfoList.value, "type", type);
  if (index != -1) return queryInfoList.value[index];
}

function uploadUserPic(element, type) {
  let slParams = uni.getStorageSync("slParams");
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: `${proxy.$config.baseUrl}:18087/user/loginReginfo/userPic`, // 上传的服务器地址
      filePath: element, // 要上传的文件路径
      name: "userPhoto", // 服务器接收文件的字段名
      formData: { type },
      header: {
        Authorization: slParams.token,
      },
      success: ({ data }) => {
        let obj = JSON.parse(data);
        resolve(obj.data);
      },
      fail: (err) => {
        console.log(err); // 上传失败的错误信息
      },
    });
  });
}

async function saveRecording(newValue) {
  let { id } = await counter.uploadFile(newValue, "savePhoto");
  await proxy.$apis.saveInfo({
    type: "5",
    describe: "",
    pictureIds: id,
  });
  proxy.$utils.showToast("录音已保存");
  getInfo();
}

watch(
  () => soundRecording.value,
  (newValue, oldValue) => {
    if (newValue) saveRecording(newValue);
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.container {
  padding: 15px;
  .tips {
    color: #333333;
    padding: 5px 15px;
    background-color: #f7f7f7;
    border-radius: 5px;
  }
  .myPhone {
    .title {
      color: #333333;
      padding: 15px 0 6px;
    }
    .phone {
      .phoneImg {
        width: 230px;
        height: 270px;
        border-radius: 8px;
        overflow: hidden;
        background-color: #d8d8d8;
        image {
          height: 100%;
          display: block;
        }
      }
      .skills {
        margin-left: 10px;
        grid-template-columns: repeat(1, minmax(0px, 1fr));
        gap: 10px 0; //上下间距 左右间距
      }
    }
    .skillBox {
      border: 2px dashed #e8e8e8;
      border-radius: 8px;
      position: relative;
      .close {
        position: absolute;
        top: -2px;
        right: -2px;
        background: #fc486f;
        border-radius: 50%;
        padding: 1px;
      }
      image {
        height: 100%;
        display: block;
        border-radius: 8px;
      }
      .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .label {
          color: #999999;
          font-size: 12px;
          margin-top: 4px;
          white-space: nowrap;
        }
      }
    }
    .otherSkills {
      grid-template-columns: repeat(3, minmax(0px, 1fr));
      gap: 0 10px; //上下间距 左右间距
      position: relative;
      height: 70px;
      margin-top: 11px;
    }
    .switchWrap {
      margin-top: 15px;
      .switchBox:first-child {
        margin-bottom: 8px;
      }
    }
    .info {
      margin-top: 15px;
      .auth {
        background-color: #f6efff !important;
      }
      .content {
        background-color: #fafafa;
        border-radius: 8px;
        padding: 8px 11px;
        .name {
          font-size: 18px;
          margin-bottom: 10px;
        }
        .topInfo {
          .authIcon {
            background-color: white;
            padding: 0 5px;
            border-radius: 10px;
            text {
              margin-left: 3px;
            }
          }
          .reliability {
            color: #9e06ff;
            .percentage {
              font-size: 24px;
            }
          }
        }
        .bottomInfo {
          background-color: white;
          margin-top: 10px;
          border-radius: 8px;
          padding: 10px;
          .check {
            margin-left: 15px;
          }
        }
        .items {
          gap: 5px 0; //上下间距 左右间距
          .item {
            font-size: 14px;
            text {
              margin-left: 5px;
            }
          }
        }
        .check {
          .icon {
            background-color: #333333;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            padding: 1px;
            margin-right: 7px;
          }
        }
      }
      .tips {
        color: #999999;
        background-color: #fafafa;
        padding: 4px 6px;
      }
      .intro {
        margin-top: 8px;
        .tbDescribe {
          margin-bottom: 5px;
        }
      }
      .introBox {
        background-color: #eeeeee;
        border-radius: 8px;
        padding: 10px 7px;
        .desc {
          color: #999999;
          margin-top: 3px;
        }
        .plus {
          background-color: white;
          width: 45px;
          height: 45px;
          border-radius: 4px;
          position: relative;
          .plusIcon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
  .audioBox {
    .close {
      background: #fc486f;
      border-radius: 50%;
      padding: 3px;
      margin-left: 8px;
    }
  }
}
</style>






